<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<style>
  .box{
    position: relative;
    width: 400px;
    border-bottom: 1px solid #ccc;
    margin: 100px auto;
  }

  .box input{
    width: 370px;
    height: 30px;
    border: 0;
    outline: 0;
  }

  .box img{
    position: absolute;
    top: 7px;
    right: 3px;

    width: 24px;
    height: 24px;
  }
</style>
<body>
<div class="box">
  <label for="pwd" >
    <img src="../../images/showPassword.svg" alt="" id="eye">
  </label>
  <input type="password" name="" id="pwd">
</div>
<script>
  var eye = document.querySelector("#eye");
  var pwd = document.querySelector("#pwd");


  eye.onclick = function () {
    if (pwd.type == 'password') {
      pwd.type = 'text';
      eye.src = '../images/hidePassword.svg';
    } else {
      pwd.type = 'password';
      eye.src = '../images/showPassword.svg';
    }
  }
</script>
</body>
</html>